<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<style type="text/css">
	#add_goods_info .box label span {
		display: inline-block;
		width: 74px;
		text-align: right;
	}
	
	#add_goods_info .box label {
		margin-right: 20px;
	}
	
	#mainContent_content .formBox {
		padding: 0;
		position: relative;
	}
	
	#add_goods_info .formBox>div {
		padding: 20px;
	}
	
	#add_goods_info .uploadImg {
		width: 200px;
		position: absolute;
		top: 290px;
		left: 580px;
	}
	
	#add_goods_info .uploadImg .img {
		display: inline-block;
		width: 100px;
		height: 100px;
		background-color: #f5f5f5;
	}
	
	#add_goods_info .updateBox label span {
		width: 96px;
	}
</style>
<div class="modal fade" id="add_goods_info" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document" style="width: 700px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">用户添加</h4>
			</div>
			<form id="add_users_form">
				<div class="box modal-body">
					<p>
						<label> <span class="must">登陆账户</span> 
						<input type="text"  class="form-control"
							name="accountName" id="accountName"></input>
						</label>
						<label> <span class="must">用户名称</span> 
						<input type="text" class="form-control"
							name="loginnames" id="loginnames"></input>
						</label>
					</p>
					<p>
						<label> <span class="must">用户密码</span> 
						<input type="text" class="form-control"
							name="password" id="password"></input>
						</label>
						<label> <span class="must">确认密码</span>
<input type="text" class="form-control"
							name="englishnames" id="englishnames"></input>
						</label>
					</p>
					<p>
						<label> <span class="must">用户状态</span>
						 <select  class="form-control select"
							id="userStatus" name="userStatus">
								<option value="启用" selected="selected">启用</option>
								<option value="关闭">关闭</option>
						</select>

						</label>
						<label> 
							<span><a class="btn btn1" onclick="toSelectRole()">新增角色</a></span>
						</label>
					</p>
					<div class="tableBox box" style="overflow-y:scroll; max-height: 250px;">
						<table class="table table-bordered table_text_center">
							<tbody id="selectRoles">

							</tbody>
						</table>
					</div>
				</div>

			</form>
			<div class="red" id="add_goods_msg" style="text-align: center;"></div>
			<div class="modal-footer">
				<button type="button" class="btn btn1" onclick="addusersub();">保存</button>
				<button type="button" class="btn btn2" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>

<!-- 用户角色选择 -->
<div class="modal fade" id="selectRole" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document" style="width: 650px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">用户角色选择</h4>
			</div>
			<div class="tableBox box" style="overflow-y:scroll; max-height: 250px;">
				<table class="table table-bordered table_text_center">
					<thead>
						<tr>
							<th>用户角色</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbodytr">
						<c:forEach items="${role }" var='role'>
							<tr>
								<td>${role.rolename }</td>
								<td>
									<a class="btn btn-xs btn1" onclick="addRole(this,${role.roleid })">添加</a>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
			<div class="red" id="add_goods_msg" style="text-align: center;"></div>
			<div class="modal-footer">
				<button type="button" class="btn btn1" data-dismiss="modal">确定</button>
			</div>
		</div>
	</div>
</div>

<script>
	/* 选择权限面板>选择选中的权限 */
	function addRole(obj, roleid) {
		var trRow = $(obj).parent().parent().index();
		var roleName = $(obj).parent().parent().children("td:eq(0)").html();
		$(obj).parent().parent().hide();
		var html = "<tr>";
		html += "<td>" + roleName + "</td>";
		html += "<td><input name='rolename' type='hidden' value='" + roleid + "' /><a class='btn btn-xs btn_danger' onclick='deleteRole(this," + trRow + ")'>删除</a></td>";
		html += "</tr>";
		$("#selectRoles").append(html);
	}
	/* 删除权限 */
	function deleteRole(obj, trRow) {
		$("#tbodytr tr:eq(" + trRow + ")").show();
		$(obj).parent().parent().remove();
	}

	/* 打开添加用户面板 */
	function toAddUser() {
		$('#add_goods_info :text').val(""); //清空add_goods_info下所有文本框的值
		$("#add_goods_info #rolename").val(""); //清空选中的值
		$('#add_goods_info').modal('show');
	}
	/* 打开选择权限面板 */
	function toSelectRole() {
		$('#selectRole').modal('show');
	}

	function addusersub() {
		var loginnames = document.getElementById("loginnames").value;
		var password = document.getElementById("password").value;
		var passwords = document.getElementById("englishnames").value;
		var rolename = $("#selectRoles").find('tr');
		var userStatus = $('#userStatus option:selected').val();
		var accountName = document.getElementById("accountName").value;

		if(accountName.length < 1) {
			Prompt.alert("提示", "请输入登录账户！");
			return;
		}
		if(loginnames.length < 1) {
			Prompt.alert("提示", "请输入用户名！");
			return;
		}

		if(password.length < 1) {
			Prompt.alert("提示", "请输入密码");
			return;
		}
		if(password != passwords) {
			Prompt.alert("提示", "请输入两次正确的密码");
			return;
		}

		if(typeof(userStatus) == "undefined" || userStatus.length < 1) {
			Prompt.alert("提示", "请选择权限");
			return;
		}

		if(typeof(rolename) == "undefined" || rolename.length < 1) {
			Prompt.alert("提示", "请选择角色");
			return;
		}

		if("1" == checkUser2()) {
			if("1" == checkUser1()) {
				$.ajax({
					url: "<%=basePath%>user/adduser2.do",
					type: "post",
					async: false,
					dataType: "json",
					data: $("#add_users_form").serialize(),
					success: function(data) {
						if(data.result == "success") {
							location.href = location.href;
						} else {
							Prompt.alert("提示", "新增用户失败：", data.error);
						}
					},
					error: function() {
						Prompt.alert("提示", "新增用户失败")
					}
				});
			}
		}
	}
	/* 检查用户是否重复 */
	function checkUser1() {
		/* 0错，1对 */
		var result = "0";
		$.ajax({
			url: "<%=basePath%>user/checkUser.do",
			type: "post",
			async: false,
			dataType: "json",
			data: $("#add_users_form").serialize(),
			success: function(data) {
				if(data.result == "success") {
					result = "1";
				} else if(data.result == "fail") {
					Prompt.alert("提示", "用户名重复，请重新命名");
				}
			},
			error: function() {
				Prompt.alert("提示", "检查用户名是否重复失败")
			}
		});
		return result;
	}
	/* 检查登录账户是否重复 */
	function checkUser2() {
		/* 0错，1对 */
		var result = "0";
		$.ajax({
			url: "<%=basePath%>user/checkUserAccountName.do",
			type: "post",
			async: false,
			dataType: "json",
			data: $("#add_users_form").serialize(),
			success: function(data) {
				if(data.result == "success") {
					result = "1";
				} else if(data.result == "fail") {
					Prompt.alert("提示", "登录账号重复，请重新命名");
				}
			},
			error: function() {
				Prompt.alert("提示", "检查登录账号是否重复失败")
			}
		});
		return result;
	}
</script>